<template>
  <div>
    <Header :left="true" leftText="返回" title="关闭加严申请审批" />
    <div style="background-color:white;">
      <van-tabs v-model="active" type="card" :offset-top="80" :sticky="true" @click="tabChange" swipeable
        style="top: 8px; font-size: 15px" color="#1c6c8d">
        <!-- 未确认页面 -->
        <van-tab title="未审核" style="font-size: 15px">
          <van-row style="margin-top: 20px">
            <van-col>
              <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
            </van-col>
            <van-col class="message">未审核记录</van-col>
          </van-row>
          <div class="textScroll">
            <!-- 循环数据开始 -->
            <div v-for="(item, index) in itemsOne" :key="item.Id" style="position: relative">
              <div style="width: 100%; background-color: white; height: 5px">
                <span></span>
              </div>

              <div class="divStyle" style="background-color: white;">
                <van-row style="margin-left: 10px; margin-top: 10px" v-show="false">
                  <van-col span="6"><b>id:</b></van-col>
                  <van-col span="14">{{ item.Id }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>序号:</b></van-col>
                  <van-col span="14">{{ index + 1 }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>生产线:</b></van-col>
                  <van-col span="14">{{ item.PLineID }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>创建时间:</b></van-col>
                  <van-col span="14">{{ item.CreateDatetime }} </van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px;margin-bottom: 10px;height: 50px;">
                  <van-col span="6"><b>申请人:</b></van-col>
                  <van-col span="14">{{ item.RequestMan }}</van-col>
                  <van-col span="2">
                    <van-button color="#138087" @click.stop="confirmmessage(item)" style="
                        width: 75px;
                        height: 40px;
                        font-size: 12px;
                        position: absolute;
                        left: 80%;
                        
                      " type="primary" text="操作处理" />
                  </van-col>

                </van-row>

                <!-- <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>申请质量理由:</b></van-col>
                  <van-col span="14">{{ item.RequestReason }}</van-col>
                </van-row> -->
                <!-- 
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="10"><b>加严管控描述:</b></van-col>
                  <van-col span="10">{{ item.StrictDescription }}</van-col>
                </van-row> -->

                <!-- <van-row style="
                    margin-left: 10px;
                    margin-top: 10px;
                    border-bottom: 2px solid rgba(82, 76, 76, 0.39);
                  ">
                  <van-col span="6"> </van-col>
                  <van-col span="3"> </van-col>
                  <van-col span="6"> </van-col>
                  <van-col span="6"> </van-col>
                  <van-col span="3"> </van-col>
                  <van-col span="6"> </van-col>
                </van-row> -->
              </div>
            </div>
          </div>
        </van-tab>
        <!-- 已确认页面 -->
        <van-tab title="已审核">
          <van-row style="margin-top: 20px">
            <van-col>
              <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
            </van-col>
            <van-col class="message">已审核记录</van-col>
          </van-row>
          <div class="textScroll">
            <!-- 循环数据开始 -->
            <div v-for="(item, index) in itemsTwo" :key="item.Id" style="position: relative">
              <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                <span></span>
              </div>

              <div class="divStyle" style="background-color: white;">
                <van-row style="margin-left: 10px; margin-top: 10px" v-show="false">
                  <van-col span="6"><b>id:</b></van-col>
                  <van-col span="14">{{ item.Id }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>序号:</b></van-col>
                  <van-col span="14">{{ index + 1 }}</van-col>
                </van-row>


                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>生产线:</b></van-col>
                  <van-col span="14">{{ item.PLineID }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>创建时间:</b></van-col>
                  <van-col span="14">{{ item.CreateDatetime }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px ;margin-bottom: 20px;">
                  <van-col span="6"><b>申请人:</b></van-col>
                  <van-col span="14">{{ item.RequestMan }}</van-col>
                  <van-col span="2">
                    <van-button color="#138087" @click.stop="confirmmessage(item)" style="
                        width: 110px;
                        height: 40px;
                        font-size: 12px;
                        position: absolute;
                        left: 70%;
                      " type="primary" text="查看详情" />
                  </van-col>
                </van-row>

                <!-- <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>申请质量理由:</b></van-col>
                  <van-col span="14">{{ item.RequestReason }}</van-col>
                </van-row> -->



                <!-- <van-row style="
                    margin-left: 10px;
                    margin-top: 10px;
                    border-bottom: 2px solid rgba(82, 76, 76, 0.39);
                  ">
                  <van-col span="6"> </van-col>
                  <van-col span="3"> </van-col>
                  <van-col span="6"> </van-col>
                </van-row> -->
              </div>
            </div>
            <!-- 循环数据结束 -->
            <!-- <van-empty v-if="itemsTwo == ''" image="search" description="暂无数据" /> -->
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>


<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  tab,
  tabs,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { _httpClient } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(tabs);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(tab);

export default {
  name: "tightclosesure",
  components: {
    tab,
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },

  data() {
    return {
      // 定时器
      time: 0,
      itemsOne: [],
      itemsTwo: [],
      query: {
        ReqDescription: "",
        RequestMan: "",
      },
    };
  },

  created: function () {
    this.getUncheckedList();
    this.timing();
  },
  //生命周期 销毁前执行
  beforeDestroy() {
    // 不销毁会在其他页面也执行，浪费性能
    clearInterval(this.time);
    this.time = null;
  },
  async mounted() { },

  methods: {
    // 定时器测试
    timing() {
      this.time = setInterval(() => {
        this.getUncheckedList();
      }, 2000);
    },
    tabChange(name, title) {
      if (name == 0) {
        //查询未确认信息
        this.getUncheckedList();
      } else if (name == 1) {
        //查询已确认信息
        this.getCheckedList();
      }
    },
    //确认
    // async confirmmessage(item) {
    //   api.openWin({
    //     name: "tightclosesure",
    //     url: "./tightenup-tightclosesureitem.html",
    //     pageParam: {
    //       item: item,
    //     },
    //     reload: true,
    //   });
    // },
    async confirmmessage(item) {
      api.openWin({
        name: "tightclosesureitem",
        url: "./tightenup-tightclosesureitem.html",
        pageParam: {
          item: item,
          show: true
        },
        reload: true,
      });
      setTimeout(function () {
        _this.$ac.closeWin();
      }, 2000);
    },

    //确认
    async selectDetails(item) {
      api.openWin({
        name: "heyu6",
        url: "./employee-heyu6.html",
        pageParam: {
          item: item,
        },
        reload: true,
      });
    },
    //查询未确审核调机数据
    async getUncheckedList() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/AddStrictCloseRequest/GetList?Checked=false" +
          "&ReqDescription=" +
          this.query.ReqDescription +
          "&RequestMan=" +
          this.query.RequestMan
        );
        // if (res.Total == 0) {
        //   Toast.clear();
        // } else {
        Toast.clear();
        _this.itemsOne = res.Data;
        //alert(JSON.stringify(res.Data));
        //}
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //查询未确审核调机数据
    async getCheckedList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/AddStrictCloseRequest/GetList?Checked=true" +
          "&ReqDescription=" +
          this.query.ReqDescription +
          "&RequestMan=" +
          this.query.RequestMan
        );
        // if (res.Total == 0) {
        //   Toast.clear();
        // } else {

        Toast.clear();
        let bb = res.Data.sort((a, b) => {

          if (b.CheckedDatetime < a.CheckedDatetime) {
            return -1;
          } else if (b.CheckedDatetime == a.CheckedDatetime) {
            return 0;
          } else if (b.CheckedDatetime > a.CheckedDatetime) {
            return 1;
          }

        })

        _this.itemsTwo = bb
        //}
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>

<style>
.message {
  font-size: 20px;
  margin-top: 10px;
  margin-left: -10px;
  font-weight: bold;
}
body {
  background-color: white;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 10.2rem;
  bottom: 1px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 0.5rem;
  z-index: 1;
}
</style>
